<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>j1007_1_each()</title>
		<style>
			.bg_0{background-color: red;}
			.bg_1{background-color: orange;}
			.bg_2{background-color: yellow;}
			.bg_3{background-color: green;}
			.bg_4{background-color: blue;}
		</style>
		<script src="js/jquery-2.1.1.js"></script>

		<script src="js/jquery-2.1.1.min.js"></script>
		<script>
			$(document).ready(function(){
				alert('~~~');
				//배열선언
				var array=[ {name:'다음',link:'http://www.daum.net'},
										{name:'구글',link:'http://www.google.com'},
										{name:'네이버',link:'http://www.naver.com'},
										{name:'네이트',link:'http://www.nate.com'}				
									];
				
				//$.each(function(index,item))
				//index는 배열의 인덱스 또는 객체의 키
				//해당 인덱스나 키가 가진 값
				$.each(array,function(index,item){
					var output="";  
					output+='<a href="'+item.link+'">';
					output+="<p>"+item.name+"</p>";
					output+="</a>";
					
					document.body.innerHTML+=output;
				});
				
				//$(selector).each(function(index,item){})
				$('h3').each(function(index,item){
					$(this).addClass('bg_'+index);
			});
			
			});//end of $(document).ready()
		</script>
	</head>
	<body>
		<h3>item-0</h3>
		<h3>item-1</h3>
		<h3>item-2</h3>
		<h3>item-3</h3>
		<h3>item-4</h3>
	</body>
</html>
